import React from 'react'

import View from 'lib/View.jsx'
import MainScope from './MainScope.es6'
import dispatcher from 'lib/dispatcher'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import Layout from '../common/layout.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultErrorElement from 'lib/util/defaultErrorElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import imgSrc from 'lib/util/ImageSource'
export default class MainView extends View{
  removeWidget(wId){
    if(confirm('确定要删除这个Widget吗？')){
      dispatcher.dispatch({
        $type:'remove_widget',
        id:wId
      })
    }
  }
  render(){
    return (
      <Layout title={BlueWare.dashboardName} subtitle="实时性能曲线" hideVersion={true}>
          {
            this.state.widgets?(
              this.state.widgets.length?(
                <div className="pure-g">
                  {
                    this.state.widgets.map(function(widget,i){
                      return (
                        <div key={i} className="pure-u-1 pure-u-lg-1-2">
                          <div className="box">
                            <Card title={widget.name} extra={
                                <div>
                                  <a href="javascript:;"
                                    data-tip="从当前仪表盘中删除"
                                    data-place="top"
                                    className="iconfont add-dashboard"
                                    onClick={this.removeWidget.bind(this,widget.id)}>&#xe61f;</a>
                                </div>
                              }>
                              <ChartWidget
                                chartType={widget.config.chartType||'line'}
                                store={widget.store}
                              />
                            </Card>
                          </div>
                        </div>
                      )
                    },this)
                  }
                </div>
              ):(
                <DefaultNoDataElement content="">
                  <p style={{margin:'0 auto',width:616}}>
                    <img src={imgSrc('mi/empty-dashboard.png')}/>
                  </p>
                </DefaultNoDataElement>
              )
            ):(
              <DefaultLoadingElement />
            )
          }
      </Layout>
    )
  }
}
MainView.defaultProps = {
  Scope:MainScope
}
